<template>
  <div>
    <!-- <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-calendar"></i> 添加项目
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div> -->

    <div class="container">
      <div class="form-box">
        <el-form ref="formRef" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="项目名称" prop="name">
            <el-input
              v-model="form.name"
              placeholder="请输入项目名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="排序编号" prop="orderNumber">
            <el-input
              v-model="form.orderNumber"
              placeholder="请输入排序编号"
            ></el-input>
          </el-form-item>

          <el-form-item label="父级" prop="parentId">
            <el-cascader ref="cascaderRef" :props="props" />
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              @click="onAddMethod"
              :loading="addBtnLoading"
              >立即添加</el-button
            >
            <el-button @click="onResetMethod">重置表单</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";

export default {
  name: "report",
  setup() {
    const { proxy } = getCurrentInstance();
    const $api = proxy.$api;
    const rules = {
      name: [{ required: true, message: "请输入项目名称", trigger: "blur" }],
    };
    const formRef = ref(null);
    const cascaderRef = ref(null);
    const addBtnLoading = ref(false);
    const form = reactive({
      name: "",
      orderNumber: "",
      parentId: null,
    });
    const props = reactive({
      label: "name",
      value: "id",
      lazy: true,
      lazyLoad(node, resolve) {
        console.log("node => ", node);
        const { level } = node;
        let parentId;
        if (level === 0) {
          parentId = null;
        } else {
          parentId = node.value;
        }
        $api.cascade
          .getCascadeList({
            parentId,
          })
          .then((res) => {
            console.log("getCascadeList => res", res);
            const nodes = res.data.map((item) => {
              return {
                ...item,
                leaf: item.childrenId === null,
              };
            });
            resolve(nodes);
          })
          .catch((err) => {
            console.error("getCascadeList error: ", err);
          });
      },
    });

    // 立即添加
    const onAddMethod = () => {
      formRef.value.validate((valid) => {
        if (valid) {
          addBtnLoading.value = true;
          const choose = cascaderRef.value.getCheckedNodes(true);
          if (choose.length) {
            form.parentId = choose[0].value;
          } else {
            form.parentId = null;
          }
          console.log("提交form= ", form);
          $api.cascade
            .addCascade(form)
            .then((res) => {
              console.log("res => ", res);
              ElMessage.success("添加成功！");
            })
            .catch((err) => {
              console.error("addReport error: ", err);
            })
            .finally(() => {
              addBtnLoading.value = false;
            });
        } else {
          return false;
        }
      });
    };

    // 重置
    const onResetMethod = () => {
      formRef.value.resetFields();
    };

    const deleteReportMethod = () => {};

    return {
      rules,
      formRef,
      cascaderRef,
      form,
      props,
      addBtnLoading,
      onAddMethod,
      onResetMethod,
      deleteReportMethod,
    };
  },
};
</script>
<style lang="css" scoped>
ul {
  list-style: none;
}
.cell {
  padding: 5px 0;
}
.list_item {
  position: relative;
}
.list_item:hover {
  background-color: pink;
}
.list_item:hover .delete_btn {
  display: block;
}
.delete_btn {
  position: absolute;
  right: 0;
  top: 0;
  display: none;
}
</style>
